<template>
  <div :id="id" :style="styleT">

  </div>
</template>

<script>

  export default {
    name: 'Pie',
    props: {
      id:{
        type: String,
        default: 'myChart'
      },
      title: {
        type: String,
        default: ''
      },
      styleT:{
        type:String,
        default:'width:100%;height:200px;'
      },
      legendColor:{
        type:String,
        default:'white'
      },
      dataSource: {
        type: Array,
        default: () => [
          { name: '示例一', value: 40 },
          { name: '示例二', value: 21 },
          { name: '示例三', value: 17 },
          { name: '示例四', value: 13 },
          { name: '示例五', value: 9 }
        ]
      }
    },
    data() {
      return {

      }
    },
    watch: {
      // dataSource:function(data){
      //   if(data != null && data.length != 0){
      //     this.dataSource = data;
      //     this.setData();
      //   }
      // }
    },
    mounted(){
      this.setData();
    },
    methods: {
      setData(){
        var dataL = this.dataSource;
        var labelV = [];
        for (var index in dataL) {
          labelV.push(dataL[index].name)
        }
        this.$nextTick(function(){
          let myChart = this.$echarts.init(document.getElementById(this.id),'light');
          myChart.setOption({
            title: {
              text: '',
              subtext: '',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              type: 'scroll',
              orient: 'vertical',
              right: 10,
              top: 20,
              bottom: 20,
              textStyle: {
                color: this.legendColor          // 图例文字颜色
              },
              data: labelV,
            },
            series: [
              {
                name: '来源',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                data:  dataL,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          });
        })

      },
    },
    computed: {

    }
  }
</script>
